<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>使用js实现上移、下移、置顶、置底功能及源码案例</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <style>
        .demo li{line-height: 30px;border-bottom: 1px solid #000;}
        .demo li a{padding: 0 20px;}
    </style>
</head>
<body>
<ul class="demo">
    <li>001
        <a href="#" class="up">上移</a>
        <a href="#" class="down">下移</a>
        <a href="#" class="top">置顶</a>
        <a href="#" class="bottom">置底</a>
    </li>
    <li>002
        <a href="#" class="up">上移</a>
        <a href="#" class="down">下移</a>
        <a href="#" class="top">置顶</a>
        <a href="#" class="bottom">置底</a>
    </li>
    <li>003
        <a href="#" class="up">上移</a>
        <a href="#" class="down">下移</a>
        <a href="#" class="top">置顶</a>
        <a href="#" class="bottom">置底</a>
    </li>
    <li>004
        <a href="#" class="up">上移</a>
        <a href="#" class="down">下移</a>
        <a href="#" class="top">置顶</a>
        <a href="#" class="bottom">置底</a>
    </li>
</ul>
<script>
    $(".demo").on('click', 'a', function(event) {
        event.preventDefault;
        var parent=$(this).parent();
        var parents=$(this).parents(".demo");
        var len=parents.children().length;
        if(($(this).is(".up") || $(this).is(".top")) && parent.index()==0){
            alert("已经置顶！");
            return false;
        }else if(($(this).is(".down") || $(this).is(".bottom")) && parent.index()==len-1){
            alert("已经置底！");
            return false;
        }
        switch (true) {
            case $(this).is(".up"):
                var prev = parent.prev();//取得同辈相邻前一个
                //parent.insertBefore(prev);//把当前元素，放在前一个前边
                prev.before(parent);
                break;
            case $(this).is(".down"):
                var next = parent.next();
                //parent.insertAfter(next);
                next.after(parent);
                break;
            case $(this).is(".top"):
                parents.prepend(parent);//把当前元素，放在最前边
                break;
            case $(this).is(".bottom"):
                parents.append(parent);//内部结尾添加元素
                break;
        }
    });
</script>
</body>
</html>